<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
    <link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />

  </head>
  <body>
    <div class="container-fluid alert alert-primary">
      <div class="row d-flex justify-content-between align-items-center">
        <div class="col-4">
          <span>卡片类型</span>
        </div>
        <div class="col-4">
          <span>FM1208</span>
        </div>
        <div class='col-4 d-flex justify-content-end'>
          <button type="button" class="btn btn-primary btn-sm" id='connectBtn'>连接发卡器</button>
        </div>
      </div>
          <div class="row d-flex justify-content-between align-items-center">
            <div class="col-4">
              <span>卡片序列号UID</span>
            </div>
            <div class="col-4">
            <input type="text" class="form-control" id="UidInput" aria-describedby="basic-addon3">
            </div>
            <div class='col-4 d-flex justify-content-end'>
              <button type="button" class="btn btn-primary btn-sm" id='readCardUID'>读取卡片UID</button>
              <button type="button" class="btn btn-danger btn-sm" id='recyleCard'>回收卡片</button>
            </div>
          </div>
    </div>



    <!-- You can also require other files to run in this process -->
    <script src="./dll/library.js"></script>
    <script src="./renderer.js"></script>
  </body>
  <script>
    require('./node_modules/bootstrap/dist/css/bootstrap.min.css')
  </script>
</html>
